<template>
  <v-dialog>
    <v-card class="mx-auto pa-10"
            min-width="120dvh"   max-width="120dvh">
      <v-card-title>{{ $t('text.role.permission.add') }}</v-card-title>
      <v-row class="spacing-playground pa-10">
        <v-col>
          <v-card>
            <v-card-title>{{ $t('text.role.category') }}</v-card-title>
            <v-card-item>
              <v-virtual-scroll
                  :items="roleCategories"
                  height="40dvh"
              >
                <template v-slot:default="{ item }">
                  <v-list-item>

                    <v-list-item-title disabled="disabled" @click="getRole(item.id)">{{ item.name }}</v-list-item-title>
                  </v-list-item>
                </template>
              </v-virtual-scroll>
            </v-card-item>
          </v-card>
        </v-col>
        <v-col>
          <v-card>
            <v-card-title>{{ $t('text.role.list') }}</v-card-title>
            <v-card-item>
              <v-virtual-scroll
                  :items="roles"
                  height="40dvh"
              >
                <template v-slot:default="{ item }">
                  <v-list-item>
                    <v-list-item-title @click="addRole(item)">{{ item.name }}</v-list-item-title>
                  </v-list-item>
                </template>
              </v-virtual-scroll>
            </v-card-item>
          </v-card>
        </v-col>
        <v-col>


          <v-card>
            <v-card-title>{{ $t('text.role.permission.list') }}</v-card-title>
            <v-card-item>
              <v-virtual-scroll
                  :items="addRoleList"
                  height="40dvh"
              >
                <template v-slot:default="{ item }">
                  <v-list-item>
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                    <template v-slot:append>
                      <v-icon
                          end @click="removeRole(item)"
                      >
                        mdi-close
                      </v-icon>
                    </template>
                  </v-list-item>
                </template>
              </v-virtual-scroll>
            </v-card-item>
          </v-card>
        </v-col>
      </v-row>
      <v-card-actions class="text-right">
        <v-btn
            append-icon="mdi-window-close"
            @click="closeEvent()"
        >{{ $t('button.common.close') }}
        </v-btn>
        <v-btn
            append-icon="mdi-check"
            @click="confirmEvent()"
        >{{ $t('button.common.submit') }}
        </v-btn>
      </v-card-actions>
    </v-card>

  </v-dialog>
</template>
<script setup lang="ts">
import {Category} from "~/resource/types/common/category";
import {usePostEventFetch} from "~/composables/use-event-fetch";
import {CLIENT_ERROR_CODE_LIST} from "~/resource/constants/common/constant";
import {I18N_PREFIX} from "~~/server/resources/constants/constant";
import {useResponseResult} from "~/utils/use-response-result";
import type {Role} from "~/resource/types/role/role";

defineProps<{
  userId?: number | null
}>()
const emit = defineEmits<{
  (e: 'confirm'): void,
  (e: 'close'): void
}>()

const confirmEvent = () => {
  const isSuccess = requestAddRoleToUser();
  if (isSuccess) {
    emit('close');
  }
  emit('confirm');
}
const closeEvent = () => {
  emit('close');
}

const roleCategories = ref<Array<Category>>([]);
const roles = ref<Array<Role>>([]);
const addRoleList = ref<Array<Category>>([]);
const localization = useI18n();
const snackbar = useSnackbar();
const getRoleCategory = async () => {
  const response = await usePostEventFetch<Array<Category>>("/role/role-category-list", {})
  if (CLIENT_ERROR_CODE_LIST.indexOf(response.code) > -1) {
    snackbar.add(useErrorNotification(localization.t(I18N_PREFIX + response.code)))
  } else if (useResponseResult(response)) {
    roleCategories.value = response.data as Array<Category>;
  } else {
    snackbar.add(useErrorNotification(response.message))
  }
}

const getRole = async (id: number) => {
  const response = await usePostEventFetch<Array<Role>>("/role/role-list", {
    params: {
      categoryId: id,
    }
  })
  if (CLIENT_ERROR_CODE_LIST.indexOf(response.code) > -1) {
    snackbar.add(useErrorNotification(localization.t(I18N_PREFIX + response.code)))
  } else if (useResponseResult(response)) {
    roles.value = response.data as Array<Role>;
  } else {
    snackbar.add(useErrorNotification(response.message))
  }
}
const addRole = (category: Category) => {
  const role = addRoleList.value.includes(category);
  if (!role) {
    addRoleList.value.push(category);
  }
}

getRoleCategory();
const requestAddRoleToUser = (): boolean => {
  return true;
}
const removeRole = (category: Category) => {
  addRoleList.value = addRoleList.value.filter(e => e.id !== category.id);
}

</script>